<template>
  <div class="project-list" direction="column">
    <div v-loading="loading" class="nav-box">
      <XrHeader :icon-color="projectColor || '#4AB8B8'"
                class="xr-header"
                icon-class="wk wk-project">
        <template v-slot:label>
          <span>{{ projectName }}</span>
          projectData:{{ projectData }}
          <el-popover v-if="showSet"
                      v-model:visible="projectHandleShow"
                      placement="bottom-start"
                      width="182">
            <div class="project-list-popover-btn-list">
              <ProjectSettings v-if="permission.setWork"
                               :work-id="workId"
                               :title="projectName"
                               :color="projectColor"
                               :is-open="projectData.isOpen"
                               :add-members-data="membersList"
                               :permission="permission"
                               tab-type="base"
                               @submite="setSubmite"
                               @handle="projectSettingsHandle"/>

              <ProjectSettings v-if="permission.setTaskOwnerUser && projectData.isOpen != 1"
                               :work-id="workId"
                               :title="projectName"
                               :color="projectColor"
                               :is-open="projectData.isOpen"
                               :add-members-data="membersList"
                               :permission="permission"
                               tab-type="member"
                               @submite="setSubmite"
                               @handle="projectSettingsHandle"/>
              <p v-if="permission.excelImport" @click="taskImportShow = true">导入任务</p>
              <p v-if="permission.excelExport" @click="exportClick">导出任务</p>
              <p v-if="permission.archiveTask && permission.setWork" @click="archiveProject">
                归档项目
              </p>
              <p v-if="permission.deleteTask && permission.setWork" @click="deleteProject">
                删除项目
              </p>
              <p v-if="projectData.isOpen == 0" @click="exitProject">退出项目</p>
            </div>
            <template v-slot:reference>
              <i class="wk wk-manage set-img"/>
            </template>
          </el-popover>
        </template>


        <!-- 人员列表 -->
        <template v-slot:ft>
          <span class="ft-btn" @click="membersShow = true">
          <i class="wk wk-s-seas ft-img"/>
          <span class="ft-label">成员管理</span>
        </span>
          <span v-show="screeningButtonShow" class="ft-btn" @click="screeningShow = true">
          <i class="wk wk-screening ft-img"/>
          <span class="ft-label">任务筛选</span>
        </span>
        </template>

        <!-- 筛选 -->
      </XrHeader>

      <div class="nav">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane name="task-board">
            <template v-slot:label>
              <el-dropdown trigger="click" @command="tabShowType = $event">
              <span class="el-dropdown-link">
                {{ showTypeName(tabShowType) }}<i class="el-icon-arrow-down el-icon--right"/>
              </span>
                <template v-slot:dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="board">看板视图</el-dropdown-item>
                    <el-dropdown-item command="list">列表视图</el-dropdown-item>
                    <el-dropdown-item command="user">负责人视图</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-tab-pane>
          <el-tab-pane label="附件" name="attachment"/>
          <el-tab-pane label="任务统计" name="task-statistical"/>
          <el-tab-pane label="归档任务" name="archiving-task"/>
        </el-tabs>
      </div>
    </div>
    <div class="content">
      <keep-alive>
        <component :is="showComponent" :condition-data="taskConditionObj"
                   :work-id="workId"
                   :show-type="tabShowType"
                   :permission="permission"/>
      </keep-alive>
    </div>

    <!-- 筛选 -->
    <TaskScreening v-if="screeningShow"
                   :work-id="workId"
                   :data="taskConditionObj"
                   @change="taskScreeningChange"
                   @close="screeningShow = false"/>

    <!-- 人员列表 -->
    <Members :work-id="workId"
             :list="membersList"
             :is-open="projectData.isOpen"
             :permission="permission"
             :visible.sync="membersShow"
             @handle="membersHandle"/>

    <!-- 任务导入 -->
    <TaskImport :work-id="workId" v-model:show="taskImportShow" @success="taskImportSuccess"
    />
  </div>
</template>

<script setup>
import {
  workWorkReadAPI,
  workWorkDeleteAPI,
  workWorkLeaveAPI,
  workWorkOwnerListAPI,
  workTaskExportAPI,
  workWorkUpdateAPI
} from '/src/api/pm/project'

import TaskBoard from './components/TaskBoard'
import TaskListBoard from './components/TaskListBoard'
import Attachment from './components/Attachment'
import TaskStatistical from './components/TaskStatistical'
import ArchivingTask from './components/ArchivingTask'
import ProjectSettings from './components/ProjectSettings'
import TaskScreening from './components/TaskScreening'
import Members from './components/Members'
import TaskImport from '../components/TaskImport' // 任务导入
import MembersDep from '/src/components/SelectEmployee/MembersDep'
import XrHeader from '/src/components/XrHeader'
import {useRoute, useRouter} from "vue-router"
import {downloadExcelWithResData} from '/src/utils'
import {ElMessage, ElMessageBox} from "element-plus";

const optionData = reactive({
  // 项目ID
  loading: false,
  tabShowType: 'board',
  workId: '',
  projectName: '',
  projectColor: '',
  projectData: {
    isOpen: 0
  },
  taskConditionObj: {
    userIds: [],
    timeId: '',
    tagIds: []
  },

  activeName: 'task-board',
  // 项目设置
  projectHandleShow: false,

  // 人员列表
  membersShow: false,
  membersList: [],
  // 是否显示筛选
  screeningButtonShow: true,
  screeningShow: false,
  // 任务导入展示
  taskImportShow: false,

  // 权限
  permission: {}
})

const {
  loading,
  tabShowType,
  workId,
  projectName,
  projectColor,
  projectData,
  taskConditionObj,
  activeName,
  projectHandleShow,
  membersShow,
  membersList,
  screeningButtonShow,
  screeningShow,
  taskImportShow, permission
} = toRefs(optionData)

const route = useRoute()
const router = useRouter()

watch(projectData, (value) => {
  console.log("projectData", value)

  console.log("projectData", optionData)
}, {
  immediate: true
})

// 展示项目设置按钮
const showSet = computed(() => {
  return (optionData.permission.setTaskOwnerUser && optionData.projectData.isOpen != 1) ||
      optionData.permission.setWork ||
      optionData.permission.excelImport ||
      optionData.permission.excelExport ||
      optionData.permission.archiveTask ||
      optionData.permission.deleteTask ||
      optionData.projectData.isOpen == 0
})

// tabs 下内容视图的组件
const showComponent = computed(() => {
  if (optionData.activeName == 'task-board') {
    if (optionData.tabShowType == 'list') {
      return TaskListBoard
    }

    return optionData.activeName
  }

  return optionData.activeName
})

function showTypeName(value) {
  return {
    board: '看板视图',
    list: '列表视图',
    user: '负责人视图'
  }[value]
}

function created() {
  optionData.activeName = 'task-board'
  // 当页面刷新时重新获取路由信息
  optionData.workId = route.params.id
  getDetail()
  getMemberList()
}

created()


/**
 * 获取项目详情
 */
function getDetail() {
  // console.log("optionData", optionData)
  workWorkReadAPI({
    workId: optionData.workId
  }).then(res => {
    const data = res.data.data
    optionData.projectData = data
    optionData.projectColor = data.color
    optionData.projectName = data.name

    optionData.permission = data.authList.project || {}
  }).catch(() => {
  })
}

function tabClick(val) {
  optionData.screeningButtonShow = optionData.activeName == 'task-board'
}

/**
 * 获取列表
 */
function getMemberList() {
  workWorkOwnerListAPI({
    workId: optionData.workId
  }).then(res => {
    optionData.membersList = res.data.data || []
    this.$bus.$emit('members-update', optionData.membersList)
  }).catch(() => {
  })
}

/**
 * 删除项目
 */
function deleteProject() {
  ElMessageBox.confirm(
      '确定要删除项目吗？删除后此项目中的所有任务将一并彻底删除，无法恢复',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    workWorkDeleteAPI(optionData.workId).then(res => {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      this.$bus.$emit('delete-project', optionData.workId)
      router.go(-1)
    }).catch(() => {
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}

/**
 * 退出项目
 */
function exitProject() {
  ElMessageBox.confirm('确认退出' + ' "' + optionData.projectName + '"', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    workWorkLeaveAPI(optionData.workId).then(res => {
      ElMessage({
        type: 'success',
        message: '退出成功!'
      })
      this.$bus.$emit('delete-project', optionData.workId)
    }).catch(() => {
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消操作'
    })
  })
}

/**
 * 归档项目
 */
function archiveProject() {
  ElMessageBox.confirm('确认归档项目' + ' "' + optionData.projectName + '"', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    workWorkUpdateAPI({workId: optionData.workId, status: 3}) // 状态 1启用 2 删除 3归档
        .then(res => {
          ElMessage({
            type: 'success',
            message: '归档成功'
          })
          this.$bus.$emit('delete-project', optionData.workId)
          router.go(-1)
        }).catch(() => {
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消操作'
    })
  })
}

/**
 * 项目设置更新数据
 */
function setSubmite(name, color, isOpen) {
  if (optionData.projectData.isOpen != isOpen) {
    getDetail()
    getMemberList()
  } else {
    optionData.projectColor = color
    optionData.projectName = name
    this.$bus.$emit('project-setting', name, optionData.workId)
  }
}

/**
 * 项目设置
 */
function projectSettingsHandle(type, data) {
  if (type == 'member') {
    getMemberList()
  }
}

/**
 * 成员设置
 */
function membersHandle(type, data) {
  if (type == 'member') {
    this.$bus.$emit('members-update', data)
    optionData.membersList = data
  }
}

/**
 * 审批导出
 */
function exportClick() {
  optionData.projectHandleShow = false
  optionData.loading = true
  workTaskExportAPI({
    workId: optionData.workId
  }).then(res => {
    downloadExcelWithResData(res)
    optionData.loading = false
  }).catch(() => {
    optionData.loading = false
  })
}

/**
 * 任务导入成功
 */
function taskImportSuccess() {
  this.$bus.$emit('work-task-import')
}

/**
 * 任务筛选
 */
function taskScreeningChange(userIds, timeId, tagIds, search) {
  optionData.taskConditionObj = {
    userIds,
    timeId,
    tagIds,
    search
  }
}
</script>

<script>


export default {
  components: {
    // TaskBoard,
    // TaskListBoard,
    // Attachment,
    // TaskStatistical,
    // ArchivingTask,
    // ProjectSettings,
    // TaskScreening,
    // Members,
    // TaskImport,
    // MembersDep,
    // XrHeader
  },

  filters: {},

  data() {
    return {}
  },

  computed: {},

  beforeRouteUpdate(to, from, next) {
    this.workId = to.params.id
    this.membersShow = false
    this.screeningShow = false
    this.getDetail()
    this.getMemberList()
    next()
  },


  methods: {}
}
</script>

<style scoped lang="scss">
.project-list {
  height: 100%;
  overflow: hidden;

  .nav-box {
    margin-bottom: 15px;
    background: #fff;
    border-radius: $xr-border-radius-base;
    border: 1px solid $xr-border-color-base;

    .xr-header {
      padding: 10px 15px;
    }

    .ft-img {
      color: #999;
      cursor: pointer;
    }

    .ft-btn {
      margin-left: 25px;
      color: #999;
      cursor: pointer;

      .ft-img {
        margin-right: 2px;
      }

      .ft-label {
        font-size: 12px;
      }
    }

    .set-img {
      margin-left: 15px;
      font-size: 14px;
      color: #ccc;
      cursor: pointer;
    }

    .ft-btn:hover {
      color: $xr-color-primary;

      .ft-img {
        color: $xr-color-primary;
      }
    }

    .ft-img:hover,
    .set-img:hover {
      color: $xr-color-primary;
    }

    .nav {
      margin-left: 64px;

      .el-tabs :deep( .el-tabs__header) {
        margin-bottom: 0;

        .el-tabs__nav-wrap::after {
          height: 0;
        }
      }
    }
  }

  .content {
    height: calc(100% - 105px);
    overflow-y: auto;
    position: relative;
  }
}

// 设置
.project-list-popover-btn-list {
  margin: 0 -12px;

  p {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    padding-left: 32px;
  }

  p:hover {
    background: #f7f8fa;
    color: #2362FB;
  }
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
}

// 项目图
.wukong-subproject {
  font-size: 27px;
  margin-right: 8px;
}
</style>
